<template>
  <header>
    <van-nav-bar title="咨询大夫" left-arrow @click-left="onClickLeft">
      <template #right>
        <van-icon name="weapp-nav" size="18" />
      </template>
    </van-nav-bar>
  </header>
  <main ref="main">
    <div class="item left" style="margin-top: 0">
      <img src="../assets/img/message/nv.png" alt="" class="logo" />
      <div class="content">
        哈哈哈几哈几点回家安居客大几十块的接口就暗示的空间的科技贷款阿萨德科技发收款方健康减肥
      </div>
    </div>
    <div class="item right">
      <img src="../assets/img/message/nv2.png" alt="" class="logo" />
      <div class="content">
        哈哈哈几哈几点回家安居客大几十块的接口就暗示的空间的科技贷款阿萨德科技发收款方健康减肥
      </div>
    </div>
  </main>
  <footer ref="footer">
    <div class="inputBox">
      <van-icon name="volume-o" />
      <input
        type="text"
        placeholder="隐私保密,安全咨询"
        v-model="textValue"
        @input="addNode"
      />
      <van-icon name="smile-o" />
      <van-icon name="add-o" />
    </div>
  </footer>
</template>

<script>
// import { Toast } from "vant";
import { ref } from "vue";
import { useRouter } from "vue-router";

export default {
  setup() {
    const router = useRouter();
    const onClickLeft = () => {
      router.push("/home/message");
    };

    const textValue = ref("");
    const main = ref(null);
    const addNode = () => {
      window.onkeydown = (ev) => {
        if (ev.keyCode === 13) {
          let str = main.value.innerHTML;
          str += `
            <div class="item right">
              <img src="/img/nv2.2ee5f4ec.png" alt="" class="logo" />
              <div class="content">
                ${textValue.value}
              </div>
            </div>
          `;
          main.value.innerHTML = str;
          textValue.value = "";
        }
      };
    };

    return {
      addNode,
      onClickLeft,
      textValue,
      main,
    };
  },
};
</script>

<style lang="less">
:root {
  --van-nav-bar-icon-color: #1d1d1d;
  --van-nav-bar-arrow-size: 20px;
}
main {
  position: fixed;
  bottom: 35px;
  top: 46px;
  left: 0;
  right: 0;
  padding: 20px 10px;
  overflow: auto;
  .item {
    margin-top: 20px;
  }
  .left {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    .logo {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
    .content {
      font-size: 16px;
      line-height: 24px;
      margin-left: 10px;
      padding: 6px 10px;
      max-width: 230px;
      background: #fff;
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
      border-bottom-left-radius: 10px;
    }
  }
  .right {
    display: flex;
    flex-direction: row-reverse;
    .logo {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
    .content {
      font-size: 16px;
      margin-right: 10px;
      line-height: 24px;
      padding: 6px 10px;
      max-width: 230px;
      background: #fff;
      border-top-left-radius: 10px;
      border-bottom-right-radius: 10px;
      border-bottom-left-radius: 10px;
    }
  }
}
footer {
  position: fixed;
  bottom: 10px;
  left: 0;
  right: 0;
  height: 30px;
  .inputBox {
    padding-left: 8px;
    display: flex;
    justify-content: space-between;
    i {
      vertical-align: middle;
      margin-right: 8px;
      font-size: 24px;
    }
    input {
      flex: 1;
      font-size: 14px;
      vertical-align: middle;
      margin-right: 8px;
      border: none;
      outline: none;
      border-radius: 8px;
      text-indent: 10px;
      &::placeholder {
        font-size: 14px;
        text-indent: 10px;
        color: #ccc;
      }
    }
  }
}
</style>
